<template>
  <div class="textbox-item">
    <el-radio-group class="textbox-item_ul" v-model="viewModel.actionType" @change="radioChang">
      <el-radio class="textbox-item_radio" :label="item.actionType" v-for="(item,index) in radioList" :key="index">
        <div class="ecimal-item_lable">
          <div class="lable-left">{{item.name}}</div>
          <div class="lable-right" v-if="item.actionType=='replace'">
            <div class="radio-ul">
              <div class="radio-li">
                <div class="radio-li_lable">原有文字：</div>
                <div class="radio-li_ipt">
                  <el-input @input="blurChang" v-model="viewModel.value[item.actionType+'_oldStr']" clearable size="small" :disabled="item.actionType!=viewModel.actionType"></el-input>
                  <div class="lable-right_error" v-if="item.actionType==viewModel.actionType&&inputFool">不能为空</div>
                </div>
              </div>
              <div class="radio-li" style="margin-top: 10px;">
                <div class="radio-li_lable">替换为：</div>
                <div class="radio-li_ipt">
                  <el-input @input="repChang" v-model="viewModel.value[item.actionType+'_newStr']" clearable size="small" :disabled="item.actionType!=viewModel.actionType"></el-input>
                  <div class="lable-right_error" v-if="item.actionType==viewModel.actionType&&inputFool2">不能为空</div>
                </div>
              </div>
            </div>
          </div>
          <div class="lable-right" v-else>
            <el-input @input="blurChang" :placeholder="placeholder" v-model="viewModel.value[item.actionType]" clearable :disabled="item.actionType!=viewModel.actionType" size="small"></el-input>
            <div class="lable-right_error" v-if="item.actionType==viewModel.actionType&&inputFool">不能为空</div>
          </div>
        </div>
      </el-radio>
    </el-radio-group>
  </div>
</template>
<script>
  export default {
    model: {
      props: 'dataModel',
      event: 'chang'
    },
    props: {
      dataModel: {},
      value: {},
      placeholder: {},
      actionType: {}
    },
    data () {
      return {
        radioList: [
          { name: '直接替换', actionType: 'equal' },
          { name: '添加前缀', actionType: 'prefix' },
          { name: '添加后缀', actionType: 'suffix' },
          { name: '替换内容', actionType: 'replace' }
        ],
        viewModel: {
          actionType: '',
          value: {}
        },
        inputFool: true,
        inputFool2: true
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        if (this.actionType) {
          this.viewModel.actionType = this.actionType
        }
        if (this.dataModel) {
          this.viewModel.value = this.dataModel
        }
      },
      radioChang () {
        this.inputFool = true
        this.inputFool2 = true
        if (this.viewModel.actionType === 'replace') {
          var oldStr = this.viewModel.value[this.viewModel.actionType + '_oldStr']
          var newStr = this.viewModel.value[this.viewModel.actionType + '_newStr']
          if (oldStr === undefined || oldStr === '' || oldStr === null) {
            this.inputFool = true
          } else {
            this.inputFool = false
          }
          if (newStr === undefined || newStr === null || newStr === '') {
            this.inputFool2 = true
          } else {
            this.inputFool2 = false
          }
        } else {
          var valueTop = this.viewModel.value[this.viewModel.actionType]
          if (valueTop === undefined || valueTop === '' || valueTop === null) {
            this.inputFool = true
          } else {
            this.inputFool = false
          }
        }
      },
      blurChang (e) {
        if (e !== '') {
          this.inputFool = false
        } else {
          this.inputFool = true
        }
      },
      repChang (e) {
        if (e !== '') {
          this.inputFool2 = false
        } else {
          this.inputFool2 = true
        }
      }
    },
    watch: {
      viewModel: {
        deep: true,
        handler (val) {
          var para = null
          if (this.viewModel.actionType === 'replace') {
            para = []
            para[0] = this.viewModel.value['replace_oldStr']
            para[1] = this.viewModel.value['replace_newStr']
          } else {
            para = this.viewModel.value[this.viewModel.actionType]
          }
          this.$emit('chang', para)
          this.$emit('actionTypeChang', this.viewModel.actionType)
        }
      }
    }
  }
</script>
<style lang="scss">
  .textbox-item {
    .textbox-item_ul {
      width: 100%;
    }
    .el-radio__label {
      flex: 1;
    }
    .textbox-item_radio {
      display: flex;
      margin: 0;
      margin-bottom: 10px;
      .el-radio__input {
        padding-top: 10px;
      }
      .ecimal-item_lable {
        flex: 1;
        display: flex;
        .lable-left {
          width: 80px;
          padding-top: 10px;
        }
        .lable-right {
          flex: 1;
          min-width: 0;
          .radio-ul {
            .radio-li {
              display: flex;
              flex-direction: row;
              .radio-li_lable {
                width: 65px;
                text-align: right;
                padding-top: 10px;
              }
              .radio-li_ipt {
                flex: 1;
                min-width: 0;
              }
            }
          }
          .lable-right_error {
            color: red;
            font-size: 10px;
            line-height: 16px;
          }
        }
      }
    }
  }
</style>